﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="../backPage/css/reset.css" rel="stylesheet" />
    <link href="../backPage/css/iconfont.css" rel="stylesheet" />
    <link href="../backPage/css/index.css" rel="stylesheet" />
    <script src="../backPage/js/jquery-1.9.1.min.js"></script>
    <script src="../backPage/js/f.js"></script>
    <title>产品管理</title>
</head>
<body>
    <div class="PublicHead clearfix">
        <div class="leftBox clearfix">
            <div class="companyLogo">
                <!--<img src="../backPage/images/logo.jpg" />-->
            </div>
            <!--<i class="iconfont icon-caidan"></i>-->

            <div class="companyText">
                篮球商城管理系统
            </div>
        </div>
        <div class="RightBox clearfix">
            <div class="UserPhotoBox">
                <div class="UserPic">
                    <img src="../backPage/images/user.jpg" />
                </div>
                <div class="UserName">
                    管理员
                </div>
            </div>
            <a href="index.html">
                <div class="dropOutBox">
                    <i class="iconfont icon-app_icons--">
                    </i>
                    <span>退出</span>
                </div>
            </a>
        </div>
    </div>

    <div class="PublicDownWhole clearfix">
        <!--左侧-->
        <div class="leftBox">
            <ul>
                <a href="UserManagement.html"> <li class=""><i class="iconfont icon-yonghuguanli"></i><span>用户管理</span></li></a>
                <a href="OrderManagement.html">
                    <li><i class="iconfont icon-tubiao_dingdan"></i><span>订单管理</span></li>
                </a>
                <a href="ClassificationManagement.html">
                    <li><i class="iconfont icon-fenlei"></i><span>分类管理</span></li>
                </a>
                <a href="ProductManagement.html">      <li class="Select"><i class="iconfont icon-weibiaoti1"></i><span>产品管理</span></li></a>
            </ul>
        </div>
        <!--右侧-->
        <div class="RightBox">
            <div class="PublicContentBox">
                <!--公用指向页面名字-->
                <div class="PublicPointToAgeText">
                    <span class="span1">产品管理  </span> <span class="span2">后台管理产品列表</span>
                </div>
                <!--查询-->
                <div class="InquireBox clearfix">
                    <div class="InquireleftBox">
                        <div class="Text">产品名称：</div>
                        <div class="InputDiv">   <input class="phoneInput" id="sel-name" name="name" placeholder="请输入你需要查询的产品名称" /></div>
                    </div>
                    <div class="InquireleftBox">
                        <div class="Text">产品分类：</div>
                        <div class="InputDiv">
                            <i class=" iconfont icon-xiala"></i>
                            <select id="brandClass" name="brandId" class="phoneInput">
                                <option value='0'>请选择你的产品分类</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </div>
                    </div>
                    <div class="PublicBtnIcon Color1Btn fr">
                        <i class="iconfont icon-icon-chaxun"></i>
                        <span onclick="findProduct()">查询</span>
                    </div>
                </div>
                <!--表修改-->
                <div class="InquireTableBox">
                    <div class="headbox">
                        <div class="headboxtext">
                            <span class="span1">后台管理产品列表</span>
                        </div>
                        <!--批量删除-->
                        <div onclick="batchDel()" class="PublicBtnIcon Color5Btn">
                            <i class="iconfont  icon-shanchu"></i>
                            <span>批量删除</span>
                        </div>

                        <div class="PublicBtnIcon Color2Btn fr Js_edit">
                            <i class="iconfont icon-changyongtubiao-mianxing-"></i>
                            <span>添加</span>
                        </div>
                    </div>

                    <!--查询到的表格-->

                    <div class="InquireSelectTable">
                        <table class="PublicTableCss">
                            <thead>
                                <tr>
                                    <td>
                                        <input id="inputcheck" class="inputcheck" type="checkbox" value="0" name="inputcheck" />
                                        <label for="inputcheck" onclick="selAll()"></label>
                                        <span>全选</span>
                                    </td>
                                    <td>序号</td>
                                    <td>产品图片</td>
                                    <td>产品名称</td>
                                    <td>产品描述</td>
                                    <td>产品价格</td>
                                    <td>产品品牌</td>
                                    <td>是否新品</td>
                                    <td>是否热卖</td>
                                    <td>是否推荐</td>
                                    <td>库存</td>
                                    <td>操作</td>
                                </tr>

                            </thead>
                            <tbody id="productList">
                            </tbody>
                        </table>

                    </div>
                    <!--分页-->
                    <div id="page-clier" class="PageNumber">
                        <div class="NumbersBox">
                            <ul id="product-management-page">
                                <li class="Select">1</li>
                                <li class="">2</li>
                                <li class="">...</li>
                                <li class="">4</li>
                                <li class="">5</li>
                            </ul>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- alert通用 提示是否删除-->
    <div class="PublicFloatBox f_delete">
        <div class="f_MiddleBox wid260">
            <div class="f_Head">
                <span>提示消息</span>
                <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
            </div>
            <div class="f_content clearfix">
                <!--提示消息内容-->
                <div class="f_someText">
                    <i class="iconfont icon-tishi"></i>
                    <span>确定删除此信息？</span>
                </div>
                <!--按钮-->
                <div class="f_pormatBtn  clearfix">
                    <div onclick="delBrand()" class="f_pormatBtn1">
                        确定
                    </div>
                    <div onclick="cancel()" class="f_pormatBtn2">
                        删除
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--添加修改产品信息浮层-->
    <div class="PublicFloatBox adduser">
        <div class="kongfx">
            <div class=" wid400">
                <div class="f_Head">
                    <span>添加产品</span>
                    <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
                </div>

                <div class="f_content">
                    <form id="add-product-img-form" enctype="multipart/form-data" method="post">
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品图片:
                            </div>
                            <div class="f_alone_input">
                                <input id="product-img" name="imgUrl" class="uploadimg" type="file" />
                            </div>
                        </div>
                    </form>
                    <form id="add-product-form" method="post">
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品名称:
                            </div>
                            <div class="f_alone_input">
                                <input name="name" class="f_p_input" />
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品描述:
                            </div>
                            <div class="f_alone_input">
                                <input name="description" class="f_p_input" />
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品价格:
                            </div>
                            <div class="f_alone_input">
                                <input name="price" class="f_p_input" />
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品品牌:
                            </div>
                            <div class="f_alone_input">
                                <select id="addBrandClass" name="brandId" class="phoneInput">
                                </select>
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                是否新品:
                            </div>
                            <div class="f_alone_input">
                                <select name="isNew" class="f_p_input">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                是否热销:
                            </div>
                            <div class="f_alone_input">
                                <select name="isHot" class="f_p_input">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                是否推荐:
                            </div>
                            <div class="f_alone_input">
                                <select name="isCommend" class="f_p_input">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>

                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                库存数量:
                            </div>
                            <div class="f_alone_input">
                                <input name="repertory" class="f_p_input" />
                            </div>
                        </div>

                        <div class="f_alonediv1">
                            <div class="f_alone_name">
                            </div>
                            <div class="f_alone_input1">
                                <!--publicbtn-->
                                <div class="publicf_btn">
                                    <div onclick="adminAddProduct()" class="publicf_btn1">
                                        确定
                                    </div>
                                    <div class="publicf_btn2 fr Js_closeBtn">
                                        取消
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--修改产品信息浮层-->
    <div class="PublicFloatBox editProduct">
        <div class="kongfx">
            <div class=" wid400">
                <div class="f_Head">
                    <span>添加产品</span>
                    <i class="Js_closeBtn iconfont icon-buoumaotubiao20 fr"></i>
                </div>

                <div class="f_content">
                    <form id="edit-product-img-form" enctype="multipart/form-data" method="post">

                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品图片:
                            </div>
                            <div class="f_alone_input">
                                <input id="edit-product-img" name="imgUrl" class="uploadimg" type="file" />
                            </div>
                        </div>
                    </form>
                    <form id="edit-product-form" method="post">
                        <input hidden="hidden" id="sign" name="sign" value="0"/>
                        <input hidden="hidden" id="id" name="id" value="0"/>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品名称:
                            </div>
                            <div class="f_alone_input">
                                <input name="name" id="name" class="f_p_input" />
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品描述:
                            </div>
                            <div class="f_alone_input">
                                <input name="description" id="description" class="f_p_input" />
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品价格:
                            </div>
                            <div class="f_alone_input">
                                <input name="price" id="price" class="f_p_input" />
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                产品品牌:
                            </div>
                            <div class="f_alone_input">
                                <select id="editBrandClass" name="brandId" class="phoneInput">
                                </select>
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                是否新品:
                            </div>
                            <div class="f_alone_input">
                                <select name="isNew" id="isNew" class="f_p_input">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                是否热销:
                            </div>
                            <div class="f_alone_input">
                                <select name="isHot" id="isHot" class="f_p_input">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                是否推荐:
                            </div>
                            <div class="f_alone_input">
                                <select name="isCommend" id="isCommend" class="f_p_input">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>

                        <div class="f_alonediv">
                            <div class="f_alone_name">
                                库存数量:
                            </div>
                            <div class="f_alone_input">
                                <input name="repertory" id="repertory" class="f_p_input" />
                            </div>
                        </div>

                        <div class="f_alonediv1">
                            <div class="f_alone_name">
                            </div>
                            <div class="f_alone_input1">
                                <!--publicbtn-->
                                <div class="publicf_btn">
                                    <div onclick="updateProduct()" class="publicf_btn1">
                                        确定
                                    </div>
                                    <div class="publicf_btn2 fr Js_closeBtn">
                                        取消
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    // 页面加载完成函数
    $(function () {
        // 加载品牌数据
        $.get("/admin_product/select_brand_all.do", function (json) {
            console.log(json);
            if (json.code == 200) {
                // 清空品牌下拉列表
                $("#brandClass,#addBrandClass,#editBrandClass").empty();
                $("#brandClass,#addBrandClass,#editBrandClass").append("<option value='0'>请选择产品分类</option>");
                for (var i = 0; i < json.data.length; i++) {
                    var option = '<option value="'+json.data[i].id+'">'+json.data[i].brandName+'</option>';
                    $("#brandClass,#addBrandClass,#editBrandClass").append(option);
                }
            }else{
                alert(json.message);
            }
        }, "json");

        // 加载商品数据
        $.post("/admin_product/back_limit_find_product.do", {page: 0, size: 4}, function (json) {
            console.log(json);
            if (json.code == 200) {
                productList(json);
            }else{
                alert(json.message);
            }
        }, "json");
    });

    // 条件查询
    function findProduct() {
        // 获取下拉框的值、输入框的值
        var inpVal = $("#sel-name").val();
        if(inpVal.length == 0){
            inpVal = 0;
        }
        var selVal = $("#brandClass").val();
        // 判断获取值的情况
        if (inpVal == 0 && selVal == 0) {
            // 没有查询
            return;
        }
        if (inpVal != 0 && selVal == 0) {
            // 调用根据名字查询接口
            $.get("/admin_product/find_product_by_name.do", {name: inpVal}, function (json) {
                if(json.code == 200){
                    selList(json);
                }else{
                    alert(json.message);
                }
            }, "json");
            return;
        }
        if (inpVal == 0 && selVal != 0) {
            // 调用根据名字查询接口
            $.get("/admin_product/find_product_by_brandId.do", {brandId: selVal}, function (json) {
                if(json.code == 200){
                    selList(json);
                }else{
                    alert(json.message);
                }
            }, "json");
            return;
        }
        if (inpVal != 0 && selVal != 0) {
            // 调用根据名字查询接口
            $.post("/admin_product/find_product_by_name_and_brandId.do", {name: inpVal, brandId: selVal}, function (json) {
                if(json.code == 200){
                    selList(json);
                }else{
                    alert(json.message);
                }
            }, "json");
            return;
        }
    }

    // 为条件查询通过列表渲染
    function selList(json) {
        // 用户数据集
        var data = json.data;

        console.log(json);
        $("#productList").empty();
        for (var i=0; i<data.length; i++) {
            var isNew = "";
            var isCommend = "";
            var isHot = "";
            if(data[i].isNew == 0){
                isNew = "否";
            }else {
                isNew = "是";
            }
            if(data[i].isCommend == 0){
                isCommend = "否";
            }else {
                isCommend = "是";
            }
            if(data[i].isHot == 0){
                isHot = "否";
            }else{
                isHot = "是";
            }

            var tr = '<tr><td><input id="chack'+data[i].id+'" class="inputcheck" type="checkbox" name="inputcheck" value="'+data[i].id+'" />' +
                '                            <label for="chack'+data[i].id+'"></label></td><td>'+(i+1)+'</td>' +
                '                            <td><div class="productImgBox"><img src="..'+data[i].imgUrl+'" />' +
                '                           </div></td><td>'+data[i].name+'</td><td>'+data[i].description+'</td>' +
                '                            <td>'+data[i].price+'元</td><td>'+data[i].brandName+'</td><td>'+isNew+'</td><td>'+isHot+'</td><td>'+isCommend+'</td><td>'+data[i].repertory+'件</td><td>' +
                '                            <div onclick="edit('+data[i].id+')" class="PublicTableBtnIcon Color3Btn Js_edit">' +
                '                            <i class="iconfont icon-tubiaozhizuomobanyihuifu-"></i>' +
                '                            <span>编辑</span></div>' +
                '                            <div onclick="del('+data[i].id+')" class="PublicTableBtnIcon Color4Btn Js_delete">' +
                '                            <i class="iconfont icon-shanchu"></i>' +
                '                            <span>删除</span></div></td></tr>';
            $("#productList").append(tr);
        }
        // 清空分页
        $("#page-clier").empty();
    }

    // 多选框的全选
    function selAll() {
        var selAll = document.getElementById("inputcheck");
        selAll.checked = !selAll.checked;
        // 获取多选框对象
        var ches = document.getElementsByName("inputcheck");
        for(var i=0;i<ches.length;i++){
            ches[i].checked = !ches[i].checked;
        }
    }

    // 批量删除
    function batchDel() {
        // 获取选中的复选框的值
        var ids = new Array();
        $('input[name="inputcheck"]:checked').each(function(){
            // 判断是有全选按钮的值，如果有则不添加
            if ($(this).val() != 0) {
                ids.push($(this).val());//向数组中添加元素
            }
        });
        console.log(ids);
        // 调用后端接口执行批量删除操作
        $.ajax({
            url:"/admin_product/batch_delete_product.do",
            type: "post",
            traditional:true,
            data: {ids: ids},
            dataType: "json",
            success: function (json) {
                // 判断状态。
                if (json.code == 200) {
                    location.reload();
                }else{
                    alert(json.message);
                }
            }
        });
    }


    // 定义全局的uid
    var id = "";

    // 修改按钮(弹框)
    function edit(uid){
        id = uid;
        // 发起post请求
        $.post("/admin_product/admin_find_by_id_product.do", {id: uid}, function (json) {
            console.log(json);
            // 判断服务器返回的状态码
            if (json.code == 200) {
                // 为修改的页面赋默认值
                $("#id").val(json.data.id);
                $("#name").val(json.data.name);
                $("#description").val(json.data.description);
                $("#price").val(json.data.price);
                $("#repertory").val(json.data.repertory);
                // 下拉选
                $("#editBrandClass").val(json.data.brandId);
                $("#isNew").val(json.data.isNew);
                $("#isHot").val(json.data.isHot);
                $("#isCommend").val(json.data.isCommend);
            }else{
                alert(json.message);
            }
        }, "json");

        // 弹出弹出层
        $(".editProduct").fadeIn(200);
    }
    // 执行修改操作
    function updateProduct() {
        // 发送Ajax请求
        $.ajax({
            url: "/admin_product/admin_update_product.do",
            type: "post",
            data: $("#edit-product-form").serialize(),
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    location.reload();
                }else{
                    alert(json.message);
                }
            }
        });
    }

    // 删除按钮(弹框)
    function del(uid) {
        id = uid;
        $(".f_delete").fadeIn(200);
    }
    // 删除操作
    function delBrand() {
        // 发起post请求
        $.post("/admin_product/admin_delete_by_id_product.do", {id: id}, function (json) {
            // 判断响应状态码
            if (json.code == 200) {
                location.reload();
            }else{
                alert(json.message);
            }
        }, "json");
    }
    // 取消删除
    function cancel() {
        // 关闭弹出层
        $(".adduser,.f_delete").fadeOut(200);
    }


    // 渲染商品数据列表
    function productList(json) {
        // 清空商品数据列表
        $("#productList").empty();
        // 用户数据集
        var data = json.data.list;
        console.log(data);

        for (var i=0; i<data.length; i++) {
            var isNew = "";
            var isCommend = "";
            var isHot = "";
            if(data[i].isNew == 0){
                isNew = "否";
            }else {
                isNew = "是";
            }
            if(data[i].isCommend == 0){
                isCommend = "否";
            }else {
                isCommend = "是";
            }
            if(data[i].isHot == 0){
                isHot = "否";
            }else{
                isHot = "是";
            }
            var tr = '<tr><td><input id="chack'+data[i].id+'" class="inputcheck" type="checkbox" name="inputcheck" value="'+data[i].id+'" />' +
                '                            <label for="chack'+data[i].id+'"></label></td><td>'+(i+1)+'</td>' +
                '                            <td><div class="productImgBox"><img src="..'+data[i].imgUrl+'" />' +
                '                           </div></td><td>'+data[i].name+'</td><td>'+data[i].description+'</td>' +
                '                            <td>'+data[i].price+'元</td><td>'+data[i].brandName+'</td><td>'+isNew+'</td><td>'+isHot+'</td><td>'+isCommend+'</td><td>'+data[i].repertory+'件</td><td>' +
                '                            <div onclick="edit('+data[i].id+')" class="PublicTableBtnIcon Color3Btn Js_edit">' +
                '                            <i class="iconfont icon-tubiaozhizuomobanyihuifu-"></i>' +
                '                            <span>编辑</span></div>' +
                '                            <div onclick="del('+data[i].id+')" class="PublicTableBtnIcon Color4Btn Js_delete">' +
                '                            <i class="iconfont icon-shanchu"></i>' +
                '                            <span>删除</span></div></td></tr>';
            $("#productList").append(tr);
        }
        // 在页码前添加上一页按钮
        if(json.data.hasPreviousPage){
            // 删除哥哥元素
            $("#top-page").remove();
            $("#product-management-page").before('<div id="top-page" onclick="sybase('+(json.data.pageNum-1)+')" class="LeftArrow">上一页</div>');
        }
        var pageSums = json.data.navigatepageNums;
        console.log(pageSums);
        // 清空分页列表
        $("#product-management-page").empty();
        // 遍历分页
        for (var i=0; i<pageSums.length; i++ ) {
            var li = '';
            if (json.data.pageNum == (i + 1)){
                li = '<li class="Select" onclick="sybase('+(i+1)+')">'+pageSums[i]+'</li>';
            }else{
                li = '<li class="" onclick="sybase('+(i+1)+')">'+pageSums[i]+'</li>';
            }
            $("#product-management-page").append(li);
        }
        // 在页码后添加下一页按钮
        if(json.data.hasNextPage){
            // 删除弟弟元素
            $("#dow-page").remove();
            $("#product-management-page").after('<div id="dow-page" onclick="sybase('+(json.data.pageNum+1)+')" class="RightArrow ">下一页</div>');
        }
    }

    // 点击分页按钮查询用户数据
    function sybase(pageSum) {
        // 发起post请求
        $.post("/admin_product/back_limit_find_product.do",{page: pageSum, size: 4},function(json) {
            // 判断服务器返回的状态
            if (json.code == 200) {
                productList(json);
            }else{
                alert(json.message);
            }
        }, "json");
    }


    // 定义上传图片的位置
    var imgUrl = "";

    // 上传图片
    $("#product-img").change(function () {
        $.ajax({
            url: "/admin_product/upload_pictures.do",
            data: new FormData($("#add-product-img-form")[0]),
            type: "post",
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (json) {
                console.log(json);
                if (json.code == 200) {
                    imgUrl = json.message;
                }
            }
        });
    });

    // 修改时上传图片
    $("#edit-product-img").change(function () {
        $.ajax({
            url: "/admin_product/upload_pictures.do",
            data: new FormData($("#edit-product-img-form")[0]),
            type: "post",
            contentType: false,
            processData: false,
            dataType: "json",
            success: function (json) {
                console.log(json);
                if (json.code == 200) {
                    $("#sign").val(1);
                    imgUrl = json.message;
                }
            }
        });
    });

    // 确定添加商品按钮
    function adminAddProduct() {
        $.ajax({
            url: "/admin_product/admin_insert_product.do",
            data: $("#add-product-form").serialize(),
            type: "post",
            dataType: "json",
            success: function (json) {
                console.log(json);
                if (json.code == 200) {
                    location.reload();
                }else{
                    alert(json.message);
                }
            }
        });
    }

</script>

</html>